<template>
  <div class="container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="isdire">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form inline>
          <el-form-item label="目录名称" class="before-item">
            <el-input v-model="input" placeholder="请输入目录名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <!-- 目录状态值 -->
            <el-select v-model="feel" placeholder="请选择状态">
              <el-option
                v-for="item in options"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" round @click="del">清除</el-button>
            <el-button type="primary" round @click="chaxun">查询</el-button>
          </el-form-item>
          <el-form-item class="btn_right">
            <el-button
              type="text"
              size="small"
              class="back"
              @click="back"
              v-if="this.isdire"
            >
              <i class="el-icon-back"></i>
              返回学科
            </el-button>
            <el-button type="success" @click="dialogFormVisible = true"
              >新增目录<i class="el-icon-upload el-icon--right"></i
            ></el-button>
            <!-- 弹出层 -->
            <el-dialog
              title="新增目录"
              :visible.sync="dialogFormVisible"
              width="450px"
              @closed="closed"
            >
                      <el-form :model="addForm" :rules="rules" ref="form">
                          <el-form-item
                  label="所属学科"
                  :label-width="formLabelWidth"
                  v-if="!this.isdire"
                >
                              <el-select
                    v-model="addForm.subjectID"
                    placeholder="请选择学科"
                  >
                                  <el-option
                      v-for="item in subjects"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                                </el-select
                  >
                            </el-form-item
                >
                          <el-form-item
                  label="目录名称"
                  :label-width="formLabelWidth"
                  prop="directoryName"
                >
                              <el-input
                    v-model="addForm.directoryName"
                    autocomplete="off"
                  ></el-input>
                            </el-form-item
                >
                        </el-form
              >
                      
              <div slot="footer" class="dialog-footer">
                          <el-button @click="dialogFormVisible = false"
                  >取 消</el-button
                >
                          <el-button type="primary" @click="add"
                  >确 定</el-button
                >
                        
              </div>
                    </el-dialog
            >
            <!-- 弹出层 -->
            <!-- 修改弹出层 -->
            <el-dialog
              title="修改目录"
              :visible.sync="editFormVisible"
              width="450px"
              @closed="closed"
            >
                      <el-form :model="editForm" :rules="rules" ref="form">
                          <el-form-item
                  label="所属学科"
                  :label-width="formLabelWidth"
                  v-if="!isdire"
                >
                              <el-select
                    v-model="editForm.subjectID"
                    placeholder="请选择学科"
                  >
                                  <el-option
                      v-for="item in subjects"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                                </el-select
                  >
                            </el-form-item
                >
                          <el-form-item
                  label="目录名称"
                  :label-width="formLabelWidth"
                  prop="directoryName"
                >
                              <el-input
                    v-model="editForm.directoryName"
                    autocomplete="off"
                  ></el-input>
                            </el-form-item
                >
                        </el-form
              >
                      
              <div slot="footer" class="dialog-footer">
                          <el-button @click="editFormVisible = false"
                  >取 消</el-button
                >
                          <el-button type="primary" @click="xiugai"
                  >确 定</el-button
                >
                        
              </div>
                    </el-dialog
            >
            <!-- 弹出层 -->
          </el-form-item>
        </el-form>
      </div>
      <!--数据多少条  -->
      <el-card
        shadow="always"
        :body-style="{ padding: '12px' }"
        class="top_num"
      >
        <i class="el-icon-warning-outline"></i>
        <span>数据一共{{ total }}条</span>
      </el-card>

      <!-- card body -->
      <el-table
        :data="directoryslist"
        style="width: 100%"
        append-to-body="true"
      >
        <el-table-column prop="index" label="序号" width="100" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="160">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="180">
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ timehandle(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="180">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="state" label="操作">
          <template slot-scope="scoped">
            <el-button type="text" @click="change(scoped.row)">
              {{ scoped.row.state === 1 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              type="text"
              :disabled="scoped.row.state === 1 ? true : false"
              @click="update(scoped.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scoped.row.state === 1 ? true : false"
              @click="remove(scoped.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        class="pageFen"
        :current-page ="parseInt(page)"
        @current-change="listChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, update, remove, add } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 是否显示

      isdire: false,
      // 假值
      sidname: {},

      // 修改id
      xiugaiId: '',
      // 验证规则
      rules: {
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },
      subjects: [],
      // 目录名称
      addForm: {
        directoryName: '',
        subjectID: ''
      },
      editForm: {
        directoryName: '',
        subjectID: ''
      },
      formLabelWidth: '80px',
      dialogFormVisible: false,
      editFormVisible: false,
      input: '',
      // 数据列表
      directoryslist: [],
      // 状态
      feel: null,
      // 状态数组
      options: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      // 当前页码
      page: 1,
      // 一页显示多少条
      perpage: 10,
      // 数据总数
      total: 1,
      id: ''
    }
  },
  // 初始化
  created () {
    // console.log(this.$route.params);
    if (this.$route.params.id) {
      this.isdire = true
      this.sidname = this.$route.params
      // console.log(this.sidname);
      //  console.log(this.$route.query);
    }
    this.mulist()
    this.simple()
  },
  watch: {
    '$route.params.id': {
      immediate: true,
      handler () {
        if (!this.$route.params) {
          // 目录列表
          this.sidname = {}
          this.mulist()
        }
      }

    }

  },
  // 方法
  methods: {
    async simple () {
      const { data } = await simple()
      this.subjects = data
    },
    // 获取数据api
    async mulist () {
      let id = null
      if (this.isdire) {
        id = this.sidname.id
        console.log(id);
      }
      console.log(this.sidname)
      console.log(id)
      const params = {
        page: this.page,
        pagesize: this.perpage,
        state: this.feel ,
        directoryName: this.input ,
        subjectID: id
      }
      // 获取数据
      const { data: { items, counts, page, pagesize, Id } } = await list(params)
      console.log(items)
      this.directoryslist = items
      this.page = page
      this.total = counts
      this.perpage = pagesize
      this.id = id
    },
    // 切换页面
    listChange (e) {
      this.page = e
      this.mulist()
    },
    // 事件格式过滤器
    timehandle (e) {
      function zero (e) {
        return e < 10 ? '0' + e : e
      }
      const oritime = new Date(e)
      const yyyy = oritime.getFullYear()
      const mm = zero(oritime.getMonth() + 1)
      const dd = zero(oritime.getDate())
      const hh = zero(oritime.getHours())
      const min = zero(oritime.getMinutes())
      const ss = zero(oritime.getSeconds())
      return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`
    },

    del () {
      this.input = ''
      this.feel = null
    },

    // 切换显示的页数
    handleSizeChange (e) {
      this.perpage = e
      this.mulist()
    },
    // 启用禁用
    async change (e) {
      // console.log(e);
      console.log(e)
      // 修改按钮状态
      try {
        if (e.state === 1) {
          e.state = 0
        } else if (e.state === 0) {
          e.state = 1
        }
        this.$message({
          message: '操作成功', type: 'success'
        })
      } catch (error) {
        this.$message({
          message: '操作失败', type: 'error'
        })
      }
      const params = {
        id: e.id,
        state: e.state
      }
      await changeState(params)
      this.mulist()
    },
    // 修改
    async xiugai () {
      // 先判断
      if (this.isdire) {
        this.editForm.subjectID = parseInt(this.$route.params.id)
      }
      if (this.editForm.subjectID === '' || this.editForm.directoryName === '') {
        return this.$message({
          type: 'error',
          message: '请全部输入内容吧'
        })
      } else {
        const params = {
          id: this.xiugaiId,
          subjectID: this.editForm.subjectID || '',
          directoryName: this.editForm.directoryName || ''
        }
        await update(params)
        this.$message({
          type: 'success',
          message: '成功'
        })
        // 关闭弹出层
        this.editFormVisible = false
        
        // 刷新列表
        this.mulist()
        // 清空表单内容
        this.editForm.subjectID = ''
        this.editForm.directoryName = ''
      }
    },
    async add () {
      // 先判断
      if (this.isdire) {
        this.addForm.subjectID = parseInt(this.$route.params.id) 
      } 
      if (this.addForm.subjectID === '' || this.addForm.directoryName === '') {
        return this.$message({
          type: 'error',
          message: '请全部输入内容吧'
        })
      } else {
        const params = {
          subjectID: this.addForm.subjectID || '',
          directoryName: this.addForm.directoryName || ''
        }
        await add(params)
        this.$message({
          type: 'success',
          message: '成功'
        })
        // 关闭弹出层
        this.dialogFormVisible = false

        // 刷新列表
        this.mulist()
        // 清空表单内容
        this.addForm.subjectID = ''
        this.addForm.directoryName = ''
      }
    },
    async update (e) {
      this.editFormVisible = true
      this.editForm.subjectID = e.subjectID
      this.editForm.directoryName = e.directoryName
      this.xiugaiId = e.id
    },
    //  返回
    back () {
      this.$router.push('/subjects/list')
    },
    // 删除
    remove (a) {
      // console.log(a)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(a)
        try {
          const params = {
            id: a.id
          }
          await remove(params)
          // 删除之后重新渲染
          this.mulist()
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        } catch (error) {
          this.$message({
            message: '删除失败!',
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closed () {
      this.$refs.form.resetFields()
    },
    // 查询
    chaxun () {
      this.page = 1
      this.mulist()
    }
  }
}
</script>

<style lang='less' scoped >
.before-item {
  margin-left: 20px;
}
.top_num {
  background: rgb(246, 242, 242);
  height: 30px;
  line-height: 5px;
  font-size: 13px;
  margin-bottom: 20px;
  span {
    margin-left: 10px;
  }
}
.pageFen{
  margin-top: 15px;
  text-align: right;
}

.btn_right {
  position: absolute;
  right: 10px;
}
.dialog-footer {
  text-align: right !important;
}
.el-select--medium {
  width: 100%;
}
.el-breadcrumb {
  margin-bottom: 10px;
}
</style>
